<template>
	<view class="chartsBox">
		<view class="chartsTitle">
			<h4>各门店分润金额</h4>
		</view>
	
	
		<uni-data-select :clear="false" class="uniDataSelect" v-model="selectValue" :localdata="selectRange"
			@change="selectChange"></uni-data-select>
			
		
	
	
		<view class="chartsMain">
			<view class="charts-box">
				<view class="charts-box">
								<qiun-data-charts type="column" :opts="opts" :chartData="chartData" ref="chartRef" />
							</view>
			</view>
		</view>
	
	</view>
</template>

<script setup>
	import {
		ref,onMounted,reactive 
	} from 'vue';
import { cemBusinessBudgetGetYears, phoneStaGetDutyYearProfit } from '../../../utils/data';
	
	import {onShow} from '@dcloudio/uni-app'

	
	//====================下拉框========================//
	let selectValue = ref(2025)
	let selectRange = ref([{
			value: 2025,
			text: "2025"
		},
		{
			value: 2024,
			text: "2024"
		},
		{
			value: 2023,
			text: "2023"
		},
	])
	
	let selectChange = (e) => {
		getServerData()
	}
	
	let getYears = () => {
		//获取登录账号的businessId
		let businessId = JSON.parse(uni.getStorageSync('businessId'))
		// let businessId = userinfo.businessId
	
		cemBusinessBudgetGetYears('/cemBusinessBudget/getYears', {
			businessId: businessId
		}).then((res) => {
			if (res.code == 200) {
				selectRange.value = []
				for (var i = 0; i < res.data.length; i++) {
					selectRange.value.push({
						value: res.data[i],
						text: res.data[i],
					})
	
				}
				if (selectRange.value.length > 0) {
	
					// 创建一个表示当前时间的Date对象
					const currentDate = new Date();
					// 获取当前年份（四位数）
					const currentYear = currentDate.getFullYear();
	
					selectValue.value = currentYear
				} else {
					selectValue.value = ''
				}
	
			}
		})
	}
	getYears()
	
	
	// =============================获取图表实例============================//
	const chartRef = ref(null)
	
	let chartData =ref({
		categories: [],
		series: []
	}) ;
	
	let opts =reactive({
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
		padding: [15,15,0,20],
		fontSize: 9,
		fontColor: "#666666",
		dataLabel: true,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		legend: {
		  show: false,
		  position: "bottom",
		  float: "center",
		  padding: 5,
		  margin: 5,
		  backgroundColor: "rgba(0,0,0,0)",
		  borderColor: "rgba(0,0,0,0)",
		  borderWidth: 0,
		  fontSize: 13,
		  fontColor: "#666666",
		  lineHeight: 11,
		  hiddenColor: "#CECECE",
		  itemGap: 10
		},
		xAxis: {
		  disableGrid: true,
		  disabled: false,
		  axisLine: true,
		  axisLineColor: "#CCCCCC",
		  calibration: false,
		  fontColor: "#666666",
		  fontSize: 9,
		  lineHeight: 20,
		  marginTop: 10,
		  rotateLabel: true,
		  rotateAngle: 45,
		  itemCount: 5,
		  boundaryGap: "center",
		  splitNumber: 5,
		  gridColor: "#CCCCCC",
		  gridType: "solid",
		  dashLength: 4,
		  gridEval: 1,
		  scrollShow: false,
		  scrollAlign: "left",
		  scrollColor: "#A6A6A6",
		  scrollBackgroundColor: "#EFEBEF",
		  title: "",
		  titleFontSize: 13,
		  titleOffsetY: 0,
		  titleOffsetX: 0,
		  titleFontColor: "#666666",
		  format: ""
		},
		yAxis: {
		  data: [
		    {
		      min: 0,
			  axisLine:false
		    }
		  ],
		  disabled: true,
		  disableGrid: true,
		  splitNumber: 5,
		  gridType: "solid",
		  dashLength: 8,
		  gridColor: "#CCCCCC",
		  padding: 10,
		  showTitle: false
		},
		extra: {
		  column: {
		    type: "group",
		    width: 30,
		    activeBgColor: "#000000",
		    activeBgOpacity: 0.08,
		    seriesGap: 2,
		    categoryGap: 3,
		    barBorderCircle: false,
		    linearType: "none",
		    linearOpacity: 1,
		    colorStop: 0,
		    meterBorder: 1,
		    meterFillColor: "#FFFFFF",
		    labelPosition: "outside"
		  },
		  tooltip: {
		    showBox: true,
		    showArrow: true,
		    showCategory: false,
		    borderWidth: 0,
		    borderRadius: 0,
		    borderColor: "#000000",
		    borderOpacity: 0.7,
		    bgColor: "#000000",
		    bgOpacity: 0.7,
		    gridType: "solid",
		    dashLength: 4,
		    gridColor: "#CCCCCC",
		    boxPadding: 3,
		    fontSize: 13,
		    lineHeight: 20,
		    fontColor: "#FFFFFF",
		    legendShow: true,
		    legendShape: "auto",
		    splitLine: true,
		    horizentalLine: false,
		    xAxisLabel: false,
		    yAxisLabel: false,
		    labelBgColor: "#FFFFFF",
		    labelBgOpacity: 0.7,
		    labelFontColor: "#666666"
		  },
		  markLine: {
		    type: "solid",
		    dashLength: 4,
		    data: []
		  }
		}
	})
	  
	  let xAxisArray = ref([])
	  let achievementArray = ref([])
	  
	  let getServerData =()=>{
		  phoneStaGetDutyYearProfit('/phoneSta/getDutyYearProfit',{
			  year:selectValue.value
		  }).then((res)=>{
			  if(res.code == 200){
				  xAxisArray.value = []
				  achievementArray.value = []
				  for (var i = 0; i < res.data.length; i++) {
				  	xAxisArray.value.push(res.data[i].businessName)
				  	achievementArray.value.push(res.data[i].achievement)
				  	
				  }
			  }
			  
			  let result = {
			      categories: xAxisArray.value,
			      series: [
			        {
			          name: "分润金额",
			          data: achievementArray.value
			        },
			  				
			      ]
			    };
			  chartData.value = JSON.parse(JSON.stringify(result));
		  })
	     
	  }
	  
	  // onMounted(()=>{
	  // 	getServerData()
	  // })
	  onShow(()=>{
		  // 创建一个表示当前时间的Date对象
		  const currentDate = new Date();
		  // 获取当前年份（四位数）
		  const currentYear = currentDate.getFullYear();
		  	
		  selectValue.value = currentYear
		  
	  	getServerData()
	  })
</script>

<style scoped lang="scss">
	.chartsBox {
		width: 688rpx;
		// height: 515rpx;
		padding: 18rpx;
		background: white;
		margin: 14rpx 0;
	
		.chartsTitle {
			width: 100%;
			height: 46rpx;
			margin-bottom: 14rpx;
		}
	
	
	
		.uniDataSelect {
			margin-bottom: 14rpx;
		}
		
	
		.chartsMain {
			width: 100%;
			height: 366rpx;
	
			// background-color: #bfa;
			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				width: 100%;
				height: 100%;
			}
	
		}
	}
	
	.orangeColor{
		color: #FF8F38;
	}
</style>